<template>
    <div class="content">
      <ul>
        <li v-for="item in reying" :key="item.id">
          <router-link :to="'/item/' + item.id">
          <div class="item_img"><img :src="item.img"/></div>
          <div class="item_text">
            <div class="item_nm"><b>{{ item.nm }}</b></div>
            <div class="item_sc" v-show="item.sc"><span>观众评</span><span>{{ item.sc }}</span></div>
            <div class="item_wish" v-show="!item.sc"><span>{{ item.wish }}</span><span>人想看</span>
            </div>
            <div class="item_desc">{{ item.desc }}</div>
            <div class="item_showInfo">{{ item.showInfo }}</div>
          </div>
          <div class="item_btn">
            <div :style="{background:item.showStateButton.color}">
              {{ item.showStateButton.content }}
            </div>
          </div>
          </router-link>
        </li>
      </ul>
    </div>
<!--    <div class="movie-con">-->
<!--      <router-view></router-view>-->
<!--    </div>-->
<!--  </div>-->
</template>

<script>
import axios from "axios";

export default {
  name: "reying",
  data() {
    return {
      reying: [],
    };
  },
  mounted() {
    axios.get("/api/mmdb/movie/v3/list/hot.json?ct=%E6%B7%B1%E5%9C%B3&ci=30&channelId=4").then((res) => {
      console.log(res);
      res.data.data.hot.forEach((item) => {
        item.img = item.img.replace("w.h", "128.180");
      });
      this.reying = res.data.data.hot;
    })
  },
};
</script>

<style scoped>
.childnav div:nth-of-type(2) {
  width: 70%;
  display: flex;
  justify-content: space-around;
  height: 1.333333rem;
  line-height: 1.333333rem;
}

/*内容样式*/
.content {
  overflow-y: scroll;
  margin-top: 170px;
  padding-top: 10px;
}

ul,
li {
  list-style: none;
}

.content li a{
  display: flex;
  justify-content: space-around;
}

.item_img {
  width: 25%;
}

.item_text {
  width: 50%;
  text-align: left;
}


.item_btn div {
  width: 60px;
  height: 30px;
  background: orangered;
  text-align: center;
  line-height: 30px;
  margin-top: 30px;
  color: #fff;
  border-radius: 15px;
}

.item_nm {
  font-size: 17px;
  margin-bottom: 0.267rem;
  text-align: left;
}

.item_sc, .item_wish {
  font-size: 0.4rem;
}

.item_sc span:nth-child(1) {
  color: #666666;
}

.item_sc span:nth-child(2) {
  color: #FAAF00;
  font-weight: bold;
  font-size: 0.453rem;
}

.item_wish span:nth-child(1) {
  color: #FAAF00;
  font-weight: bold;
  font-size: 0.453rem;
}

.item_wish span:nth-child(2) {
  color: #666666;
}

.item_desc {
  margin-top: 0.32rem;
  color: #666666;
  font-size: 0.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item_showInfo {
  margin-top: 0.32rem;
  color: #666666;
  font-size: 0.4rem;
}

img {
  width: 100%;
}

</style>